<template>
    <el-dialog v-model="visible" :title="title" width="500px">
        <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="formData.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="formData.realName" placeholder="请输入真实姓名" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="formData.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formData.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="formData.sex" placeholder="请选择性别">
                    <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="formData.roleIds" placeholder="请选择角色" multiple>
                    <el-option
                        v-for="item in sysRoleList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="部门">
                <el-tree-select
                    v-model="formData.deptId"
                    :data="sysDeptList"
                    check-strictly
                    :render-after-expand="false"
                    node-key="id"
                    :props="treeProps"
                    placeholder="请选择部门"
                />
            </el-form-item>
            <el-form-item label="岗位">
                <el-select v-model="formData.postId" placeholder="请选择岗位">
                    <el-option
                        v-for="item in sysPostList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {addReq,updateReq} from '@/api/sys/user/index.js'

const visible = ref(false)

const formData = reactive({
    username: '',
    realName: '',
    email: '',
    phone: '',
    sex: '1',
    deptId: null,
    postId: null,
    roleIds: null
})

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '字符长度在3~10之间', trigger: 'blur' },
    ],
    realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
})

const sexList = ref([
    { label: '未知', value: '1' },
    { label: '男', value: '2' },
    { label: '女', value: '3' },
])

const props = defineProps({
    querySelective: Function,
    sysPostList: Array,
    sysDeptList: Array,
    treeProps: Object,
    sysRoleList: Array
})

const title = ref('')
const actionType = ref('')
const open = (type, row) => {
    if (type == 'add') {
        actionType.value = type
        title.value = '添加用户'
        formData.username = ''
        formData.realName = ''
        formData.email = ''
        formData.phone = ''
        formData.sex = '1'
        formData.deptId = null
        formData.postId = null
        formData.roleIds = null
        formRef.value?.resetFields()
    }
    if (type == 'update') {
        actionType.value = type
        title.value = '修改用户'
        formData.id = row.id
        formData.username = row.username
        formData.realName = row.realName
        formData.email = row.email
        formData.phone = row.phone
        formData.sex = row.sex
        formData.deptId = row.deptId
        formData.postId = row.postId
        formData.roleIds = row.roleIds
    }
    visible.value = true;
}

defineExpose({
    open
})


const close = () => {
    visible.value = false;
}

const formRef = ref()

const addOrUpdate = async () => {
    const valid = await formRef.value?.validate() // 改变这一行
    if (valid) {
        if (actionType.value == 'add') {
            const res = await addReq(formData);
            if (res.code == 200) {
                // 添加成功！
                ElMessage.success(res.message)
                // 查询用户列表
                props.querySelective();
                close();
            }
        }
        if (actionType.value == 'update') {
            const res = await updateReq(formData);
            if (res.code == 200) {
                // 添加成功！
                ElMessage.success(res.message)
                // 查询用户列表
                props.querySelective();
                close();
            }
        }
    }
}
</script>